<template>
  <view class="bjys2">
    <view @click="navigateBtn()" class="play_back">
      <image src="@/static/img/play_back.png" mode=""></image>
    </view>
    <div class="videotype" style="margin-left: 75rpx;">
      <div class="search3">
        <div class="input">
          <input @focus="focus()" :focus="isFocus" style="margin-top: 8rpx;" v-model="detailSearch" type="text"
            @confirm="confirm" class="input__text" placeholder="输入视频名称">
        </div>
        <div class="right" @click="collect">
          <image src="@/static/img/cardcz.png"></image>搜索
        </div>
      </div>
    </div>
    <!-- 历史搜索 -->
    <view v-if="result">
      <view class="histor">
        历史搜索
        <view class="clera" @click="cleraBtn(1)">清空</view>
      </view>
      <view class="overhidd">
        <text class="historList" v-for="(item,index) in searchList" :key="index" @click="searchBtn(item,1)">
          {{ item }}
        </text>
      </view>
      <view class="histor2">
        热搜关键词
        <view class="clera2" @click="cleraBtn(2)">换一换</view>
      </view>
      <view class="overhidd2">
        <text class="historList2" v-for="(item,index) in search" :key="index" @click="searchBtn(item.search_name,2)">
          {{ item.search_name }}
        </text>
      </view>
    </view>

    <view v-if="!result" class="flex_item">
      <view :class="num == index ? 'bor-ra':'bor-ra2'" @click="tabSelect1(index)" v-for="(item,index) in categoryMenu"
        :key="index">
        {{ item }}
        <view class="hengheng" v-if="num == index">

        </view>
      </view>
    </view>

    <view class="indexbox" v-if="num == 0">
      <view class="indexbox_left" v-for="(item,index) in vidoList" :key="index">
        <view class="image11" @click="jumpBtn2(item.vod_url)" :style="{'backgroundImage':'url('+item.vod_pic+')' }"
          v-if="vidoList && item.vod_url">

        </view>
        <view v-else @click="playBtn(item)">
          <view class="VIP_img" v-if="item.vod_vip == 2">
            VIP
          </view>
          <view class="inox_left_img" v-if="item.vod_pic" :style="{'backgroundImage':'url('+item.vod_pic+')' }">
          </view>
          <view class="inox_left_img" v-else :style="{'backgroundImage':'url('+gifUrl+')' }">
          </view>
          <image class="inox_left_icon" src="@/static/img/collect_btn.png" v-if="scztList.indexOf(item.vod_id) == -1"
            @click.stop="sczt(item.vod_id)" mode="widthFix"></image>
          <image class="inox_left_icon" src="@/static/img/collect_btn_active.png" v-else @click.stop="sczt(item.vod_id)"
            mode="widthFix"></image>
          <view class="inl_content">{{ item.vod_name }}</view>
        </view>
      </view>
    </view>

    <view class="indexbox" v-if="num == 1">
      <view class="indexbox_left" v-for="(item,index) in vidoList2" :key="index">
        <view class="image11" @click="jumpBtn2(item.vod_url)" :style="{'backgroundImage':'url('+item.vod_pic+')' }"
          v-if="vidoList2 && item.vod_url">

        </view>
        <view v-else @click="playBtn(item)">
          <view class="VIP_img" v-if="item.vod_vip == 2">
            VIP
          </view>
          <view class="inox_left_img" v-if="item.vod_pic" :style="{'backgroundImage':'url('+item.vod_pic+')' }">
          </view>
          <view class="inox_left_img" v-else :style="{'backgroundImage':'url('+gifUrl+')' }">
          </view>
          <image class="inox_left_icon" src="@/static/img/collect_btn.png" v-if="scztList.indexOf(item.vod_id) == -1"
            @click.stop="sczt(item.vod_id)" mode="widthFix"></image>
          <image class="inox_left_icon" src="@/static/img/collect_btn_active.png" v-else @click.stop="sczt(item.vod_id)"
            mode="widthFix"></image>
          <view class="inl_content">{{ item.vod_name }}</view>
        </view>

      </view>
    </view>


  </view>
</template>

<script>
  export default {
    data() {
      return {
        num: 0,
        categoryMenu: ['最新', "最热"],
        result: true,
        vidoList: [],
        isFocus: false,
        detailSearch: '',
        searchList: [],
        vidoList2: [],
        scztList: [],
        search: [],
        page: 1,
        gifUrl: 'https://www.tmtv777.com/img/logo.1cecf4f4.gif'
      }
    },
    methods: {
      jumpBtn2(url) {
        plus.runtime.openURL(url, function() {
          console.log(res, 123)
        })
      },
      playBtn(item) {
        uni.navigateTo({
          url: `/pages/player?playid=${item.vod_id}`
        })
      },
      /**
       * 收藏
       */
      sczt(scid) {
        this.scztList = uni.getStorageSync('vod_id') || [];
        this.$http.sczt({
          scid: scid,
          token: uni.getStorageSync('phone')
        }).then(res => {
          if (res.code == 200) {
            if (res.message == '收藏成功') {
              this.$toast(res.message)
              this.scztList.push(scid);
              uni.setStorageSync('vod_id', this.scztList)
            } else if (res.message == '取消收藏') {
              this.scztList = uni.getStorageSync('vod_id') || [];
              this.scztList.slice().reverse().forEach((item, index, arr1) => {
                if (item === scid) {
                  this.scztList.splice(arr1.length - 1 - index, 1);
                }
              });
              uni.setStorageSync('vod_id', this.scztList)
              this.$toast(res.message)
            }
          }
        }).catch(err => {
          this.needLogin();
        })
      },
      navigateBtn() {
        uni.navigateBack();
      },
      focus() {
        this.isFocus = true;
        this.result = true;
        this.num = 3;
      },
      tabSelect1(index) {
        this.num = index;
        this.page = 1;
      },
      /**
       * 搜索之后的数据
       */
      searchBtn(item) {
        this.num = 0;
        uni.showLoading({
          title: '加载中'
        })
        this.result = false;
        this.$http.tab1({
          p: this.page,
          t: item,
          l: 'search'
        }).then(res => {
          if (res.code == 200) {
            this.vidoList = res.data.tab1list;
          }
        })
        this.$http.tab2({
          p: this.page,
          t: item,
          l: 'search'
        }).then(res => {
          if (res.code == 200) {
            this.vidoList2 = res.data.tab1list;
            uni.hideLoading();
          }
        })
      },
      confirm(e) {
        this.isFocus = true;
        let detail = e.detail.value;
        this.searchBtn(detail);
        this.num = 0;
        this.result = false;
        this.searchList.push(detail)
        uni.setStorageSync('search', this.searchList);
        setTimeout(() => {
          this.searchList = uni.getStorageSync('search');
        }, 500)
      },
      collect() {
        this.isFocus = false;
        let detail = this.detailSearch;
        this.searchBtn(detail);
        this.num = 0;
        this.result = false;
        this.searchList.push(detail)
        uni.setStorageSync('search', this.searchList);
        setTimeout(() => {
          this.searchList = uni.getStorageSync('search');
        }, 500)
      },
      cleraBtn(index) {
        uni.showLoading({
          title: '加载中'
        })
        if (index == 1) {
          let arr = [];
          uni.setStorageSync('search', arr);
          setTimeout(() => {
            this.searchList = uni.getStorageSync('search');
            uni.hideLoading()
          }, 500)
        } else if (index == 2) {
          this.$http.search().then(res => {
            if (res.code == 200) {
              uni.hideLoading()
              this.search = res.data.searchlist;
            }
          })
        }

      }
    },
    onReachBottom() {
      if (this.num == 0) {
        uni.showLoading({
          title: '加载中'
        })
        this.page++;
        this.result = false;
        this.$http.tab1({
          p: this.page,
          t: this.detailSearch,
          l: 'search'
        }).then(res => {
          if (res.code == 200) {
            this.vidoList = [...this.vidoList, ...res.data.tab1list];
            uni.hideLoading();
            if (res.data.tab1list == null) {
              this.$toast('没有更多了~');
              return;
            }
          }
        })
      } else if (this.num == 1) {
        uni.showLoading({
          title: '加载中'
        })
        this.page++;
        this.result = false;
        this.$http.tab2({
          p: this.page,
          t: this.detailSearch,
          l: 'search'
        }).then(res => {
          if (res.code == 200) {
            this.vidoList2 = [...this.vidoList2, ...res.data.tab1list];
            uni.hideLoading();
            if (res.data.tab1list == null) {
              this.$toast('没有更多了~');
              return;
            }
          }
        })
      }
    },
    onLoad() {
      this.scztList = uni.getStorageSync('vod_id');
      this.$http.search().then(res => {
        if (res.code == 200) {
          this.search = res.data.searchlist;
        }
      })
      this.searchList = uni.getStorageSync('search') || [];
    }
  }
</script>

<style lang="less">
  page {
    background-color: #f9faff;
  }

  .bjys2 {
    padding-top: 50rpx;
    height: 390rpx;
    width: 750rpx;
    top: 0;
    position: absolute;
    width: 100%;
    background: linear-gradient(90deg, #bdc3c7, #2c3e50);
    border-bottom-right-radius: 30rpx;
    border-bottom-left-radius: 30rpx
  }

  .right {
    color: #FFFFFF;

    image {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .histor {
    position: relative;
    margin-top: 15rpx;
    margin-bottom: 15rpx;
    padding-left: 15rpx;
    font-size: 1.3rem;
    color: #354657;

    .clera {
      position: absolute;
      top: 0;
      left: 86%;
      font-size: 24rpx;
      color: #FFFFFF;
    }

  }

  .overhidd {
    width: 96%;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;

    .historList {
      padding: 10rpx 24rpx;
      border-radius: 22rpx;
      background: #f7f7f7;
      text-align: center;
      font-size: 30rpx;
      line-height: 100rpx;
      margin-bottom: 10rpx;

      margin-left: 3%;
      font-size: 28rpx;
    }
  }

  .histor2 {
    position: relative;
    margin-top: 15rpx;
    margin-bottom: 15rpx;
    padding-left: 15rpx;
    font-size: 1.3rem;
    color: #354657;

    .clera2 {
      position: absolute;
      top: 0;
      left: 86%;
      font-size: 24rpx;
      color: #FFFFFF;
    }

  }

  .overhidd2 {
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .historList2 {
      padding: 10rpx 24rpx;
      border-radius: 22rpx;
      background: #f7f7f7;
      text-align: center;
      font-size: 30rpx;
      line-height: 30rpx;
      margin-bottom: 20rpx;

      margin-left: 3%;
      font-size: 28rpx;
    }
  }

  .flex_item {
    width: 30%;
    margin: 40rpx auto;
    display: flex;
    justify-content: flex-start;
    padding-left: 34rpx;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;

    .bor-ra {
      position: relative;
      display: flex;
      height: 56rpx;
      justify-content: center;
      margin-right: 30rpx;
      transform: scale(1.2);
      color: #fff;
    }

    .bor-ra2 {
      position: relative;
      display: flex;
      height: 56rpx;
      justify-content: center;
      margin-right: 30rpx;
      font-size: 28rpx;
      color: #fff;
    }

    .hengheng {
      position: absolute;
      bottom: 4rpx;
      width: 20rpx;
      height: 6rpx;
      border-radius: 3rpx;
      background-color: #FFFFFF;
    }
  }

  .indexbox {
    margin-top: 30rpx;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;

    .indexbox_left {
      position: relative;
      margin-left: 15rpx;
      margin-top: 55rpx;
      width: 47%;
      height: 310rpx;
      border-radius: 20rpx;
      overflow: hidden;

      .VIP_img {
        position: absolute;
        top: 0;
        padding: 5rpx 10rpx;
        left: 0;
        z-index: 9;
        border-radius: 0rpx 0 20rpx 0;
        color: #FFFFFF;
        background: linear-gradient(90deg, #fb4376, #e6d44f);
      }

      .inl_content {
        position: absolute;
        width: 98%;
        bottom: 0rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 250rpx;
        box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
        border-radius: 20rpx;
        background-size: cover;
        background-position: 50%;
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        right: 15rpx;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 80%;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          span {
            margin-right: 20rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-right: 0;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }

  .image11 {
    // margin-bottom: 30rpx;
    width: 100%;
    height: 100%;
    // text-align: center;
    border-radius: 20rpx;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;

  }
</style>
